<template>
  <view class="password-page flex-between fdc" :style="my_style">
    <view class="w100">
      <view class="u-text-center u-m-b-60 font-36 lh-44">{{ title }}</view>
     <!-- <u-message-input
        v-model="input_number"
        :dot-fill="true"
        :maxlength="6"
        :disabled-keyboard="true"
      ></u-message-input> -->
    </view>
    <view class="bg-white w100">
     <!-- <u-number-keyboard
        :random="false"
        @backspace="backspace"
        @change="change"
        mode="number"
        :dot-enabled="false"
      ></u-number-keyboard> -->
    </view>
  </view>
</template>

<script>
  import md5Libs from '@/utils/md5'
  export default {
    data() {
      return {
        input_number: '',
        step: 'first',
        pay_password: '',
        re_pay_password: '',
        key: '',
      }
    },
    watch: {
      input_number: {
        handler(val) {
          if (val.length === 6 && this.step === 'first') {
            this.pay_password = val
            this.step = 'second'
            this.input_number = ''
            return
          }
          if (val.length === 6 && this.step === 'second') {
            this.re_pay_password = val
            this.setPayPassword()
          }
        },
        immediate: true,
      },
    },
    onLoad(options) {
      this.key = options.key || ''
      this.step = options.step || 'first'
    },
    computed: {
      title() {
        return this.step === 'first' ? '请设置新支付密码' : '请确认新支付密码'
      },
    },

    methods: {
      // 退格键
      backspace() {
        if (this.input_number.length === 0) {
          return
        }
        this.input_number = this.input_number.substr(0, this.input_number.length - 1)
        console.log(this.input_number)
      },
      change(e) {
        this.$emit('change', e)
        if (this.input_number.length === 6) {
          return
        }
        this.input_number = `${this.input_number}${e}`
      },
      // 用户-设置支付密码
      async setPayPassword() {
        const { pay_password, re_pay_password, key } = this
        let params = {
          pay_password: md5Libs.md5(pay_password),
          re_pay_password: md5Libs.md5(re_pay_password),
          key,
        }
        const { message, code } = await this.$api.common.user('setPayPassword', params)
        if (code === 200) {
          let info = {
            title: '支付密码',
            tip: '修改支付密码成功',
            btn: '返回',
          }
          this.successGo(`?info=${encodeURIComponent(JSON.stringify(info))}`)
        }
      },
      // 返回上一页
      back() {
        // 获取页面栈
        var pages = getCurrentPages()
        console.log(pages)
        if (pages.length > 1) {
          // 上一个页面实例对象
          var prePage = pages[pages.length - 2]
        }
        // uni.navigateBack(-1);
      },
    },
  }
</script>

<style lang="scss" scoped>
  .password-page {
    height: 100%;
    padding-top: 40%;
  }
</style>
